<template>
	<view class="container">
		<!-- 顶部导航栏 -->
		<view class="header">
			<x-status-bar></x-status-bar>
			<view class="flex-center-between header-navbar">
				<x-back-btn></x-back-btn>
				<view class="u-f-40 common-title">{{ lang_extension.extensionCode }}</view>
				<image src="@/static/image/common/share.png" style="width: 36rpx; height: 36rpx;"
					@click="shareVisible = true"></image>
			</view>
		</view>

		<view class="flex-center-center">
			<view style="position: relative;width: 100%;height: 100%;" class="clear-flex">
				<image src="@/static/image/common/poster.png" class="auto-img" mode="widthFix"></image>
				<image :src="code" class="code-img"></image>
				<view class="poster-name u-f-40 u-lh-56 font-medio">{{ userInfo.nick }}</view>
			</view>
		</view>

		<canvas id="qrcode" canvas-id="qrcode" :style="{
			position: 'fixed',
			top: '-9999999px',
			zIndex: '-9999999',
			'width': `${options.size}px`,
			'height': `${options.size}px`
		}" />

		<!-- 分享弹窗 -->
		<x-share v-model="shareVisible"></x-share>
	</view>
</template>

<script>
	import uqrcode from '@/utils/uqrcode.js'
	export default {
		data() {
			return {
				options: {
					canvasId: 'qrcode',
					size: 200,
					margin: 0,
					text: 'http://mrptmaph5.leaf-tech.net/index.html?type=share&inviteCode='
				},
				code: '',
				scale: 1,

				shareVisible: false
			}
		},
		async onLoad() {
			// 获取屏幕宽度
			let width = uni.getSystemInfoSync().windowWidth
			uni.getImageInfo({
				src: require('@/static/image/common/poster.png'),
				success: e => {
					this.$set(this, 'scale', 750 / e.width)
				}
			})
			this.$nextTick(async () => {
				let result = await this.make()
				this.code = result.tempFilePath
			})
		},
		methods: {
			// 转换
			scaleTransform(num) {
				return (num * this.scale) + 'rpx'
			},
			// 生成二维码信息
			make(options = {}) {
				return uqrcode.make({ ...this.options , text: this.options.text + this.userInfo.no }, this)
			}
		}
	}
</script>

<style scoped lang="scss">
	.container /deep/ .u-drawer-bottom,
	.container /deep/ .u-mode-center-box {
		background: transparent
	}
	
	.code-img {
		position: absolute;
		left: 64rpx;
		bottom: 54rpx;
		width: 146rpx;
		height: 146rpx
	}

	.poster-name {
		position: absolute;
		left: 237rpx;
		bottom: 138rpx;
	}
</style>
